<template>
<div class="Index-wrap">
    <div id="header"></div>
    <div class="fixed header-wraper" style="z-index: 2">
        <van-search left-icon="location-o" placeholder="请输入搜索关键词" v-model="sSearchValue" show-action :background="navBg ?'#e1251b':'transparent'" :style="navBg ? 'color:white' : ' '">
            <div slot="action" :style="navBg ? 'color:white' : ' '" @click="fnSearch">搜索</div>
        </van-search>
    </div>
    <div class="Indextabs">
        <van-tabs v-model="IndexActive" @change="indexTabsSwitch(0)" style="margin-bottom: 5px">
            <van-tab title="首页"></van-tab>
            <van-tab v-for="(item,index) in IndexTopMenu" :key="index" :title="item.title" style="padding: 10px;">
                <van-list v-model="IndexTopNavloading" :finished="IndexTopNavfinished" finished-text="没有更多了" @load="onIndexTopNavLoad">
                    <Goods :data="IndexTopMenuData.data" :load="false" :type="0" @getDetails="getDetails" />
                </van-list>
            </van-tab>
            <van-tab title=" "></van-tab>
            <div slot="default" class="TabsMore">
                <span @click="getSortMore">
                    <van-icon name="wap-nav" style="vertical-align: middle" id="Indextabs" /> 分类 </span>
            </div>
        </van-tabs>
    </div>
    <div :class="is_indexFixed && IndexActive != 0 ? 'is_topbar_fixed' : 'dn'">
        <div>
            <van-tabs v-model="IndexActive" @change="indexTabsSwitch(1)" style="margin-bottom: 5px" >
                <van-tab title="首页"></van-tab>
                <van-tab v-for="(item,index) in IndexTopMenu" :key="index" :title="item.title" style="padding: 10px;">
                </van-tab>
                <van-tab title=" "></van-tab>
                <div slot="default" class="TabsMore">
                    <span @click="getSortMore">
                        <van-icon name="wap-nav" style="vertical-align: middle" id="Indextabs" /> 分类 </span>
                </div>
            </van-tabs>
        </div>
    </div>

    <div v-if="IndexActive == 0">
        <div class="header-swipe">
            <van-swipe :autoplay="3000" >
                <van-swipe-item v-for="(data, index) in swipeImage" :key="index" @click="goIndexSwipe(index)">
                    <img class="swipeimage" :ref="data.image" style="width: 100%;" :src="data.image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- srart mall_nav -->
        <div class="l-category">
            <router-link :to="item.ink" v-for="item in mallNavData" :key="item.title">
            <div>
               
                <svg slot="icon" class="icon closeImg" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                </svg>
                <p>{{ item.text }}</p>
                
            </div>
            </router-link>
        </div>
        <van-notice-bar text="無优商城17号正式上线！" left-icon="volume-o" />
        <!-- end mall_nav -->
        <!-- srart seckill -->
        <div class="seckill" v-if="seckillGoods">
            <div class="clearfix" style="padding: 2px 0;border-top: 3px solid rgba(170,170,170,.1);background-color: white;">
                <div class="l" style="style: hieght: 25px;">
                    <span style="padding-left: 2px;"><img style="height: 25px;" src="http://ymshosss.oss-cn-shanghai.aliyuncs.com/M3E4IphpItkyih1571288351191017.png"></span>
                </div>
                <div class="r">
                    <router-link to="./seckill">
                        <span style="text-align: right;line-height: 27px;">
                            更多
                            <van-icon name="arrow" />
                            &nbsp;
                            &nbsp;
                        </span>
                    </router-link>
                </div>
            </div>
            <div class="seckill-title-wrap clearfix">
                <a class="l" href="#"></a>
            </div>
            <seckillGoods :GoodsData="seckillGoods" @getSeckillGoods="getSeckillGoods" />
        </div>

        <!-- end seckill -->
        <!-- start app下载 -->

        <div class="download fixed">
            <router-link to="mine/download">
                在APP打开
                <van-icon name="arrow" style="vertical-align: sub" size="16px" />
            </router-link>
        </div>
        <!-- end app下载 -->
        <!-- start banner 广告 -->
        <div class="banner-swipe">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(data, index) in bannerImage" :key="index">
                    <img class="banner-swipeimage"  style="width: 100%" :src="data.image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- end banner 广告 -->

        <!-- start 年秒抢 -->
        <div class="clearfix" style="padding: 2px 0;border-top: 3px solid rgba(170,170,170,.1);border-bottom:3px solid rgba(170,170,170,.1);background-color: white;">
            <div class="l" style="style: hieght: 25px;">
                <span style="padding-left: 2px;"><img style="height: 25px;" src="http://ymshosss.oss-cn-shanghai.aliyuncs.com/WioE9php9C1Daq1568180854190911.png"></span>
            </div>
            <div class="r">
                <router-link to="./seckill">
                    <span style="text-align: right;line-height: 27px;">
                        更多
                        <van-icon name="arrow" />
                        &nbsp;
                        &nbsp;
                    </span>
                </router-link>
            </div>
        </div>

        <div style="overflow: auto">
            <!-- {{ yearData }} -->
            <seckillGoods :GoodsData="yearData" @getSeckillGoods="getSeckillGoods" />
        </div>
        <!-- End 年秒抢 -->
        <!-- start group 热门商品 -->
        <div class="group-wrap">
            <div style="width: 100%;">
                <img style="height: 100%;width: 100%;" src="http://ymshosss.oss-cn-shanghai.aliyuncs.com/ZpJxrphp969B7t1567772968190906.gif">
            </div>
            <van-tabs v-model="active" @change="IndexSort(0)" id="scrollTop" swipeable>
                <van-tab title="圆梦超市">
                    <div style="padding: .5rem"></div>
                    <div style="padding: 0 7px">
                        <van-list v-model="officialLoading" :finished="officialFinished" finished-text="没有更多了" @load="officialOnload">
                            <Goods :data="officialData.data" :type="0" :load="false" @getDetails="getDetails" />
                        </van-list>
                    </div>
                </van-tab>
                <van-tab title="圆梦商城">
                    <div style="padding: .5rem"></div>
                    <div style="padding: 0 7px">
                        <van-list v-model="officialLoading" :finished="officialFinished" finished-text="没有更多了" @load="officialOnload">
                            <Goods :data="officialData.data" :type="3" :load="false" @getDetail="getDetail" />
                        </van-list>
                    </div>
                </van-tab>
                <van-tab title="积分商城">
                    <div style="padding: .5rem"></div>
                    <div style="padding: 0 7px">
                        <van-list v-model="officialLoading" :finished="officialFinished" finished-text="没有更多了" @load="officialOnload">
                            <Goods :data="officialData.data" :type="2" :load="false" @getDetail="getDetail" />
                        </van-list>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!-- end group 热门商品 -->
        <div class="is_tabFixed" style="padding: 0 7px;" v-if="tabScrollTop">
            <van-tabs v-model="active" @change="IndexSort(1)" swipeable>
                <van-tab title="圆梦超市">
                </van-tab>
                <van-tab title="圆梦商城">
                </van-tab>
                <van-tab title="积分商城">
                </van-tab>
            </van-tabs>
        </div>
    </div>

    <copyright />
    <c-footer></c-footer>

    <!-- 首页弹窗广告 -->

    <van-dialog v-model="index_ad_image" :showConfirmButton="false" style="background-color: transparent;">
        <div style="padding:10px"></div>
        <div class="close text-right">
            <van-icon color="white" name="cross" size="20px" @click="index_ad_image = false" />
        </div>
        <div class="store_ad_image" @click="goStorePlank">
            <img :src="store_ad_image_ad" />
        </div>
    </van-dialog>
    <van-popup v-model="upData" :style="{ height: '100%',width: '100%' }">
       <div style="display:flex;justify-content: center;align-items: center;height: 100vh;">
           <div>
               <p class="text-center">
                   <svg slot="icon" class="icon closeImg text-center" aria-hidden="true" style="font-size: 5rem;margin-right: 4px;">
                    <use xlink:href="#icon-svg-17"></use>
                </svg>
               </p>
               
               <h1>系统升级中 ...</h1> 
               <p class="text-center">预计48小时</p>
               <p class="text-center">2019-10-28 16:01:22</p>
           </div>
           
       </div>
        
    </van-popup>
</div>
</template>

<script>
import storeGoods from '@/components/storeGoods'
import axios from 'axios';
import indexGoods from '@/components/indexGoods.vue';
import Goods from '@/common/goods/index.vue';
import seckillGoods from '@/common/goods/seckill'
import {
    Toast,
    Icon
} from 'vant';
export default {
    name: "Index",
    data() {
        return {
            upData: false,
            accessToken: '',
            value: "",
            sSearchValue: "",
            scrollTop: 0,
            topActive: 0,
            active: 0,
            IndexActive: 0,
            actives: 0,
            navBg: false,
            tabScrollTop: false,
            loadType: false,
            seckillWidth: null,
            seckillGoods: null,
            recommend: [],
            officialData: null,
            integral: [],
            IndexTopMenu: [],
            IndexTopMenuData: [],
            officialLoading: true,
            officialPage: 1,
            defaultType: false,
            officialLastPage: null,
            officialFinished: false,
            IndexTopMenuPage: 1,
            IndexSortUrl: '',
            IndexSortload: true,
            is_indexFixed: false,
            IndexSortPage: 1,
            is_integral_load: true,
            is_recommend_load: true,
            topNavLastPage: null,
            yearData: null,
            mallNavData: [
                {
                    text:"圆梦超市",
                    icon:"#icon-chaoshixinyuan",
                    ink:'/sort'
                },
                {
                    text: "积分商城",
                    icon: "#icon-jifen2",
                    ink: '/integral'
                },
                {
                    text: "圆梦商城",
                    icon: "#icon-shangcheng1",
                    ink: '/selfStore'
                },
                {
                    text: "無优周末",
                    icon: "#icon-svg-16",
                    ink: '/discount'
                },
                {
                    text: "心灵鸡汤",
                    icon: "#icon-ziyuan",
                    ink: '/video'
                },
                {
                    text: "秒抢专区",
                    icon: "#icon-yingxiaogongju-tuangoumiaosha",
                    ink: '/seckill'
                }
            ],
            swipeImage: null,
            bannerImage: null,
            IndexTopNavloading: false,
            IndexTopNavfinished: false,
            index_ad_image: true,
            store_ad_image_ad: null
        };
    },
    components: {
        indexGoods,
        storeGoods,
        Goods,
        seckillGoods
    },
    created() {
        this.getAccessToken();
        this.getUserInfo();
        this.getSwiperData();
        this.getBannerData();
        this.getGoods();
        this.getSeckill();
        this.getTopMenuData();
        this.IndexSort();
        this.getDefaultAddress();
        this.getShare() //重置分享链接
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop);
    },
    activated() {
        window.addEventListener('scroll', this.scrollToTop);
    },
    watch: {
        official: function (value, OldValue) {
            // console.log(value);
        }
    },
    methods: {
        getGoods() {
            let params = {
                token : this.accessToken
            }
            const yearData = this.axios.get('/api/store/seckill/year/',{params});
            yearData.then(res => {
                    if (res.data.code == 200) {
                    this.yearData = res.data.data
                }
            })
            .catch(err => {
                console.log(err)
            })
        },
        IndexSort(e) {
            if (e == 1) return;
            this.IndexSortPage = 1;
            switch (this.active) {
                case 1:
                    this.IndexSortUrl = '/api/store/index/recommend/'
                    break;
                case 2:
                    this.IndexSortUrl = '/api/store/index/recommend/Integral/'
                    break;
                default:
                    this.IndexSortUrl = '/api/store/index/recommend/Official/';
                    break;
            }
            let url = this.IndexSortUrl;
            let data = {
                data: []
            };
            this.officialData = data;
            this.officialPage = 1;
            this.officialLastPage = null;
            this.officialFinished = false;
            this.officialOnload(url);
        },
        getAccessToken() {
            let accessToken = this.getQueryVariable('token');
            let parent_id = this.getQueryVariable('parent_id');
            let open_id = this.getQueryVariable('openid');
            let store_url = this.getQueryVariable('store_url');
            let id = this.getQueryVariable('id');
            let store_parent_id = this.getQueryVariable('store_parent_id');
            let goods_id = this.getQueryVariable('goods_id');
            if (accessToken) {
                this.accessToken = accessToken;
                this.global.state.accessToken = accessToken;
                sessionStorage.setItem('token', accessToken);
                if (store_parent_id) {
                    sessionStorage.setItem('shareStoreParentId', store_parent_id)
                    this.$router.push({
                        name: 'storeEntering',
                        params: {
                            store_parent_id: store_parent_id
                        }
                    })
                }else if(goods_id){
                    this.$toast('请稍等...');
                    let shareGoodsId = goods_id;
                    sessionStorage.setItem('shareGoodsId', shareGoodsId);
                    let url = this.removeURLParameter(window.location.href, 'goods_id');
                    window.history.pushState({status: 0} ,'' ,url);
                    this.axios('/api/store/user/goodInfo/'+goods_id).then(res=>{
                        this.global.state.productStore_goods = res.data.data;
                        this.$router.push({name:'productStore'})
                    }).catch(err=>console.log(err))
                    
                }
            } else if (open_id) {
                if (parent_id) {
                    this.create(open_id, parent_id, 0);
                } else if (store_parent_id) {
                    this.create(open_id, store_parent_id, 1);
                }else if(goods_id){
                    this.create(open_id, goods_id, 2);
                    
                } else {
                    this.create(open_id, null, 3);
                }
            } else {
                let url = this.removeURLParameter(window.location.href, 'openid');
                if (parent_id) {
                    window.location.href = 'http://api.xheme.com/api/wechatofficial/1/login?url=' + url + '&parent_id=' + parent_id;
                } else if (store_parent_id) {
                    window.location.href = 'http://api.xheme.com/api/wechatofficial/1/login?url=' + url + '&store_url=' + store_url + '&store_parent_id' + store_parent_id;
                } else if(goods_id){
                    window.location.href = 'http://api.xheme.com/api/wechatofficial/1/login?url=' + url + '&goods_id=' + goods_id;
                } else {
                    window.location.href = 'http://api.xheme.com/api/wechatofficial/1/login?url=' + url;
                }
            }
        },
        create(open_id, parent_id, ...type) {
            let params = {};
            params.open_id = open_id;
            if (type == 1) {
                params.store_parent_id = parent_id;
            } else if (type == 0) {
                params.parent_id = parent_id;
            }else if(type == 2){
                params.goods_id = parent_id
            }
            const sub = this.axios.post('/api/wechatofficial/1/register', params);
            sub.then(result => {
                    Toast('注册成功,正在登陆...');
                    window.location.href = window.location.origin;
                })
                .catch(error => {

                })
        },
        scrollToTop() {
            // 首页Toptabs滑动
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (this.IndexActive == 0) {
                let tabScrollTop = document.querySelector('#scrollTop').offsetTop;
                let tabScrollTops = tabScrollTop - 56;
                if (scrollTop > 100) {
                    this.navBg = true
                } else {
                    this.navBg = false
                }
                if (scrollTop > tabScrollTops) {
                    this.tabScrollTop = true;
                } else {
                    this.tabScrollTop = false;
                }
            } else {
                if (scrollTop > 44) {
                    this.is_indexFixed = true;
                    this.navBg = true
                } else {
                    this.is_indexFixed = false;
                    this.navBg = false
                }
            }
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        },
        removeURLParameter(url, parameter) {
            var urlparts = url.split('?');
            if (urlparts.length >= 2) {
                //参数名前缀
                var prefix = encodeURIComponent(parameter) + '=';
                var pars = urlparts[1].split(/[&;]/g);
                //循环查找匹配参数
                for (var i = pars.length; i-- > 0;) {
                    if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                        //存在则删除
                        pars.splice(i, 1);
                    }
                }
                return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
            }
            return url;
        },
        getUserInfo() {
            let params = {};
            params.token = sessionStorage.getItem("token")
            this.axios.get('/api/wechatofficial/mine',{params}).then(result => {
                    this.userInfo = result.data.data;
                    this.global.state.userInfo = this.userInfo;
                    this.global.state.storeInfo = this.userInfo.stores;
                })
                .catch(error => {
                    console.log(error)
                });
        },
        getSwiperData() {
            this.axios.get('/api/store/user/swiper/storeSwiper', {
                token: this.accessToken
            }).then(result => {
                this.swipeImage = result.data.data
            })
            this.axios.get('/api/store/user/swiper/indexPop', {
                token: this.accessToken
            }).then(result => {
                this.store_ad_image_ad = result.data.data[0].image
            })
        },
        getBannerData() {
            this.axios.get('/api/store/user/swiper/storeBanner', {
                token: this.accessToken
            }).then(result => {
                this.bannerImage = result.data.data
            })
        },
        getSeckill() {
            this.axios.get('/api/store/index/seckill/?token=' + this.global.state.accessToken)
                .then(res => {
                    this.seckillGoods = res.data.data;
                }).catch(err => {
                    console.log(err)
                })
        },
        selectShopName(goods) {
            this.global.state.goodsInfo = goods;
            this.$router.push({
                name: 'product',
                path: '../product',
                params: {
                    goods: goods,
                    storeInfo: this.global.state.storeInfo
                }
            })
        },
        getDetail(e, type) {
            if (type == 1) {
                this.global.state.productStore_goods = e;
                this.$router.push({
                    name: 'productStore',
                    path: '/product/store'
                })
            } else if (type == 2) {
                this.global.state.productStore_goods = e;
                this.$router.push({
                    name: 'productIntegral',
                    path: '/product/integral'
                })
            } else {
                this.global.state.productMerchant_store_id = e.store_id;
                this.global.state.productMerchant_goods = e;
                this.$router.push({
                    path: '/product/merchant'
                });
            }
        },
        getSeckillGoods(e) {
            this.$router.push({
                path: '../product/seckill'
            })
            this.global.state.seckillGoodsData = e;
        },
        getDetails(e) {
            this.global.state.productStore_goods = e;
            this.$router.push({
                name: 'productStore',
                path: './product/store'
            })
        },
        getDefaultAddress() {
            let params = {};
            params.token = sessionStorage.getItem("token");
            if (params.token == null) return;
            const defaultAddress = this.axios.get('/api/store/user/address/list/', {
                params
            })
            defaultAddress.then(res => {
                this.defaultType = true;
                res.data.data.data.forEach(item => {
                    if (item.default) {
                        this.global.state.defaultAddress = item
                    }
                });
            }).catch(err => err)

        },
        getSortMore() {
            this.$store.state.categoryListData = this.IndexTopMenu;
            this.$router.push({
                name:'storeList',
                params:{type:'official'}
            });
        },
        indexTabsSwitch(e) {
            if (e == 1) return;
            this.topNavLastPage = null;
            this.IndexTopMenuPage = 1;
            this.IndexTopNavfinished = false;
            this.getTopNavMenuData();
            document.documentElement.scrollTop = 0;
        },
        onIndexTopNavLoad() {
            this.getTopNavMenuData();
        },
        getTopMenuData() {
            let params = {};
            params.token = this.accessToken;
            this.axios.get('/api/store/index/menu',{ params }).then(res => {
                this.IndexTopMenu = res.data.data;
                this.$store.state.categoryData = res.data.data;
            }).catch(err => {
                console.log(err)
            })
        },
        officialOnload(url = this.IndexSortUrl) {
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.page = this.officialPage;
            this.axios(url, {
                params
            }).then(res => {
                if (this.officialLastPage == null || this.officialPage <= this.officialLastPage) {
                    this.officialPage = res.data.data.current_page + 1;
                    if (res.data.data.data && res.data.data.current_page == 1) {
                        this.officialData = res.data.data;
                        this.officialLastPage = res.data.data.last_page;
                    } else {
                        let data = [...this.officialData.data, ...res.data.data.data];
                        this.officialData.data = data;
                    }
                    this.officialLoading = false;
                } else {
                    this.officialFinished = true;
                    this.officialLoading = false;
                }

            }).catch(err => {
                console.log(err)
            })
        },
        getTopNavMenuData() {
            if (this.IndexActive == 0) return;
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.page = this.IndexTopMenuPage;
            if (this.topNavLastPage == null || this.IndexTopMenuPage <= this.topNavLastPage) {
                let url = '/api/store/index/data/' + this.IndexTopMenu[this.IndexActive - 1].id;
                this.axios.get(url, {
                    params
                }).then(res => {
                    this.IndexTopNavloading = false;
                    let data = [];
                    this.topNavLastPage = res.data.data.last_page;
                    this.IndexTopMenuPage = res.data.data.current_page + 1;
                    if (res.data.data.data && res.data.data.current_page == 1) {
                        this.IndexTopMenuData = res.data.data;
                    } else {
                        data = [...this.IndexTopMenuData.data, ...res.data.data.data];
                        this.IndexTopMenuData.data = data;
                    }
                })
            } else {
                this.IndexTopNavloading = false;
                this.IndexTopNavfinished = true;
            }
        },
        async goStorePlank(){
            const storeList =  this.axios('/api/store/merchant/store_list/')
            this.$toast('请稍等...');
            await storeList.then(res=>{
                this.global.state.productMerchant_store = res.data.data.data[0]
                this.$router.push({name:'store'});
            }).catch(err=>{
                window.console.log(err)
            })
        },
        goIndexSwipe(e){
            this.$store.state.categoryListData = this.IndexTopMenu
            this.$router.push({name:'storeList',params:{type:'official'}})
        },
        goShare(){
            console.log('设置成功');
        },
        getShare(){ //设置分享
            let links = `${location.origin}`
            let share = new this.wxShare(this.goShare);
            let option = {
                title: document.title,
                desc: '无忧商城',
                link: links,
                imgUrl: 'http://ymshosss.oss-cn-shanghai.aliyuncs.com/EGYNUphpmc6yu71570354017191006.png'
            };
            share.config(1,option);
            share.config(2,option);
        },
        fnSearch(){
            if(this.sSearchValue){
                this.$router.push({path:'/search',query:{value:this.sSearchValue}})
            }else {
                Toast('请输入搜索内容')
            }
        }
    },
    deactivated(){
        window.removeEventListener('scroll', this.scrollToTop, false);
        this.indexData.state.once = false;
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.scrollToTop, false);
        this.indexData.state.once = false;
    }
}
</script>

<style lang="less" scoped>
.Index-wrap {
    padding-bottom: 50px;
}

.Indextabs {
    padding-top: 50px;
}

.TabsMore {
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    line-height: 44px;
    height: 44px;
    background: #fff;
    color: white;
}

.TabsMore span {
    padding: 5px;
    border-radius: 10px;
    background: #ed6a0c;
}

.is_tabFixed {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 2;
    background: white;
}

.group-wrap {
    padding: 0;
    background-color: transparent
}

.plank {
    padding: 5px 20px;
    margin-bottom: 5px;
    max-height: 390px;

    .goods-avatar {
        height: 110px;
        width: 110px;

        img {
            height: 100%;
            width: 100%;
            border-radius: 4px;
        }
    }

    .goods-info {
        margin-left: 2px;
        padding: 2px 0 2px 10px;
        height: 110px;
        width: calc(100% - 115px);
    }
}

.download {
    right: 0;
    top: 13vh;
    background-color: rgb(249, 63, 36);
    z-index: 3;
    padding: 0 0 0 10px;
    line-height: 35px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.download a {
    color: white;
}

.is_topbar_fixed {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 99
}

.store_ad_image {
    max-width: 18.8462rem;
    max-height: 85vh;
    margin: 0 auto;
    background: no-repeat 100% 100%;
    overflow: hidden;
}

.store_ad_image img {
    margin: 10px 0;
    width: 100%;
    border-radius: 4px
}
.l-category {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1.4286rem;
    text-align: center;
    background: #fff;
    margin: 0.1429rem 0 0.2857rem;
    div {
        padding: 0.7143rem 0;
    }
    p {
        margin: 0.2857rem 0;
        font-size: 0.8571rem;
        color: #666;
    }
    svg {
        font-size: 1.7857rem;
    }
}
</style><style lang="less">
.Indextabs {
    .van-tabs {
        .van-tabs__wrap {
            .van-tabs__nav {
                padding-right: 85px;
            }
        }
    }
}
</style>
